import React, {Component} from "react";
import {inject, observer} from "mobx-react";
import {Button, Icon, Input, Layout} from "antd";
import Text from "antd/es/typography/Text";

export default @inject('store') @observer
class Register extends Component {
    constructor(props) {
        super(props);

        this.state = {
            username: '',
            password: '',
            passwordRepeat: '',
            nickname: '',
            phone: '',
        };
    }

    _register() {
        window.$http.postForm('/register',
            {
                username: this.state.username,
                password: this.state.password,
                password_check: this.state.passwordRepeat,
                nickname: this.state.nickname,
                phone: this.state.phone,
            }).then(res => {
            window.$message.destroy();
            this.setState({loading: false});

            if (res.status === 10000) {
                window.$message.success("申请注册成功");
                // this.props.history.push('/');
            } else {
                window.$message.error(res.message);
            }
        }).catch(err => {
            this.setState({loading: false});
            window.$message.destroy();
            window.$message.error("通讯失败，请重试。");
        })
    }

    render() {
        return (
            <div style={{height: '100%', backgroundColor: "#262626"}}>
                <div style={{margin: '0 auto', textAlign: 'center', position: 'relative', top: 130}}
                     className={'loginBox'}>
                    <Text style={{color: '#fff', fontSize: 30}} strong={true}>用户 注册</Text>
                    <Input
                        width={'100%'}
                        style={{marginBottom: 10, marginTop: 10}}
                        value={this.state.username}
                        onChange={e => this.setState({username: e.target.value})}
                        prefix={<Icon type={'user'} style={{color: 'rgba(0,0,0,25)'}}/>}
                        placeholder={'用户名'}
                    />
                    <Input.Password
                        width={'100%'}
                        style={{marginBottom: 10}}
                        value={this.state.password}
                        onChange={e => this.setState({password: e.target.value})}
                        prefix={<Icon type={'key'} style={{color: 'rgba(0,0,0,25)'}}/>}
                        placeholder={'密码'}
                    />
                    <Input.Password
                        width={'100%'}
                        style={{marginBottom: 10}}
                        value={this.state.passwordRepeat}
                        onChange={e => this.setState({passwordRepeat: e.target.value})}
                        prefix={<Icon type={'key'} style={{color: 'rgba(0,0,0,25)'}}/>}
                        placeholder={'重复密码'}
                    />
                    <Input
                        width={'100%'}
                        style={{marginBottom: 10}}
                        value={this.state.nickname}
                        onChange={e => this.setState({nickname: e.target.value})}
                        prefix={<Icon type={'code'} style={{color: 'rgba(0,0,0,25)'}}/>}
                        placeholder={'昵称'}
                    />
                    <Input
                        width={'100%'}
                        style={{marginBottom: 10}}
                        value={this.state.phone}
                        onChange={e => this.setState({phone: e.target.value})}
                        prefix={<Icon type={'phone'} style={{color: 'rgba(0,0,0,25)'}}/>}
                        placeholder={'手机号'}
                    />
                    <Button type={"primary"} style={{width: '100%'}}
                            onClick={() => this._register()}> 注册 </Button>
                </div>
                <Layout.Footer style={{
                    backgroundColor: '#262626', textAlign: "center", padding: 14,
                    position: "absolute", bottom: 0, color: '#a6a6a6',
                    width: '100%'
                }}>
                    Moyrn © 2019 - 2020
                </Layout.Footer>
            </div>
        )
    }
}